<template>
  <div class="container box">
    <div class="left-box">
      <div class="title">{{ blogDetail.title }}</div>
      <div class="userinfo-box">
        <div class="block">
          <el-avatar shape="square" size="large" :src="require('../../assets/avator/'+userInfo.avator)"></el-avatar>
          <div style="margin-left: 10px;">{{userInfo.name}}</div>
        </div>
        <div class="btns">
          <!-- <el-button type="primary" plain><i class="el-icon-chat-square" v-show="false"></i>私聊</el-button> -->
        </div>
      </div>
      <div class="content-box">
        <div class="content-img">
          <el-image lazy
                 fit="cover" v-for="(item, index) in blogimgs"
                :key="index" :src="require('../../assets/blogImg/'+item)" 
                :preview-src-list="srcList"
                class="blogimg"
          ></el-image>
        </div>
        <div class="wenzi">
          {{ blogDetail.content }}
        </div>
      </div>
      <div class="content-footer">
        <div class="top-btn">
          <div :class="showComment?'bot-btn btn-active':'bot-btn'" @click="handleComment">评论区</div>
          <div :class="!showComment?'bot-btn btn-active':'bot-btn'" @click="handleProtect">宣传栏</div>
        </div>
        <div class="comment-box" v-show="showComment">
          <DetailComment/>
        </div>
        <div class="protect-box" v-show="!showComment">
          <Protect/>
        </div>
      </div>
    </div>
    <div class="right-box">
      <RaceMain/>
    </div>
  </div>
</template>

<script>
import DetailComment from './detailComment.vue'
import RaceMain from '@/components/race/race_main.vue'
import Protect from '@/components/protect.vue'
import {GetBlogById,GetUserInfo} from '../../request/api'
import { mapState } from 'vuex'
export default {
  data(){
    return{
      showComment:true,
      params:{
        blogid:this.$route.query.blogid,
        userid:this.$route.query.userid
      },
      blogimgs:[],
      blogDetail:{},
      // userDetail:{}
      imgs:[],
      userInfo:{}
    }
  },
  computed:{
    ...mapState({
      userDetail:state=>state.userInfo.userDetail
    }),
    srcList(){
      return this.blogimgs.map(item => require('../../assets/blogImg/'+item))
    },
    showBtn(){
      return this.$route.query.userid == sessionStorage.getItem('userid')
    }
  },
  components:{
    DetailComment,RaceMain,Protect
  },
  methods:{
    handleComment(){
      // 改变showComment的值
      this.showComment = true
    },
    handleProtect(){
      // 改变showComment的值
      this.showComment = false
    }
  },
  async created(){
    // 发送请求得到对应博客的数据
    let res = await GetBlogById(this.params)  
    this.blogDetail = res.data.data
    // 处理图片
    let str = this.blogDetail.blogimg
    if(str){
        if (str.startsWith("[") && str.endsWith("]")) {
            // 去除字符串中的方括号和空格，然后使用逗号分隔字符串
            this.blogimgs = str.slice(1, -1).split(", ").map(item => item.trim());
        }
    }
    let res2 = await GetUserInfo(this.params)
    this.userInfo = res2.data.data
  }
}
</script>

<style scoped>
.title{
  width: 100%;
  font-size: 28px;
  margin: 0 auto;
  text-align: center;
}
.container{
  background-color: white;
}
.box{
  display: flex;
  flex-direction: row;
}
.left-box{
  flex: 7;
  border: 1px solid #000;
  background-color: rgb(244,246,249);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.right-box{
  flex: 3;
  border: 1px solid #000;
  margin-left: 10px;
  background-color: rgb(244,246,249);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.userinfo-box{
  padding: 10px;
  position: relative;
}
.btns{
  position: absolute;
  right: 20px;
  top: 10px;
}
.block{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.content-box{
  padding: 10px;
}
.content-img{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 30px;
  margin-bottom: 20px;
}
.blogimg{
  width: 300px;
  height: 200px;
}
.wenzi{
  font-size: 16px;
  text-indent: 2em;
  line-height: 1.5;
}
.top-btn{
  display: flex;
  flex-direction: row;
  justify-content: start;
  margin-bottom: 10px;
  margin-left: 10px;
}
.bot-btn{
  width: 60px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: large;
  margin-right: 10px;
  border: 1px solid rgb(233,233,235);
  border-radius: 4px;
  background-color: white;
}
.bot-btn:hover{
  background-color: rgb(233,233,235);
  cursor: pointer;
}
.btn-active{
  background-color: rgb(233,233,235);
  cursor: pointer;
}
.comment-box{
  width: 100%;
}
</style>
